<script setup>
import {defineEmits, defineModel, onBeforeMount, ref} from "vue";
import {systemInfo, userInfo} from '@/stores/userStore.js'
import {globalOptions} from "@/api/http/globalconfig.js";

const models = ref([]);
const fromVal = defineModel('fromVal', {default: {}})

const sendButtonIsLoading = defineModel('sendButtonIsLoading', {default: false})

const emit = defineEmits(['handleMessage']);
const sendMessage = () => {
  emit('handleMessage', {
    "message": fromVal.value.userMessage,
    "modelType": fromVal.value.modelType,
    "userId": userInfo().userId
  })
}


onBeforeMount(async () => {
  await globalOptions()
      .then(res => {
        models.value = res.data.data.supportModels.options;
        fromVal.value.modelType = res.data.data.supportModels.defaultKey;
      })
  // await getModelsEnum().then(res => {
  //   models.value = res.data.data;
  //   fromVal.value.modelType = models.value[0].key
  // })
})
</script>

<template>
  <div style="width: 80%" class="chat-box-wrapper">
    <el-form :model="fromVal">
      <el-form-item>
        <el-input
            v-model="fromVal.userMessage"
            style="box-shadow:none"
            resize="none"
            type="textarea"
            autofocus
            :rows="5"
            :placeholder="$t('chatPlaceHolder')"/>
      </el-form-item>
      <el-form-item v-if="systemInfo().displayMode===1" style="width: 200px;float: left" :label="$t('model')">
        <el-select
            v-model="fromVal.modelType"
        >
          <el-option v-for="item in models"
                     :key="item.key"
                     :label="item.value"
                     :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item style="float: right">

        <el-upload
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            multiple
            :limit="3"
            :disabled="true"
        >
          <el-button>
            &emsp;
            <el-icon size="20px">
              <Link/>
            </el-icon>
            &emsp;
          </el-button>
        </el-upload>

        <el-button style="margin-left: 20px" @click="sendMessage" :loading="sendButtonIsLoading"
                   :disabled="sendButtonIsLoading"
        >
          <el-icon size="20px">
            <Finished/>
          </el-icon>
          {{ $t('send') }}
        </el-button>
      </el-form-item>
    </el-form>


  </div>

</template>

<style scoped lang="scss">
</style>

<style lang="scss">
.chat-box-wrapper {
  .el-upload-list {
    margin: 0 0 0 0;
  }
}
</style>